<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template v-cloak>
  <div class="outer">
    <div class="new-cats">
      <div
        class="new-cat"
        v-for="(cat, i) in catItems"
        :key="i"
        :style="{
          fontWeight: 0 == i ? 'bold' : '',
          color: 0 == i ? primaryColor : '',
          background: 0 == i ? primaryColor + '25' : '',
        }"
      >
        {{ cat.name }}
      </div>
    </div>
    <div class="empty" v-if="!items.length">
      <empty>
        <div>请从文章管理处添加文章</div>
      </empty>
    </div>

    <style0 :items="items" :primaryColor="primaryColor" />
  </div>
</template>
<script>
import Style0 from "./Style0";

import { getNewsList, getNewsCatList } from "@/api/weapp";
import Empty from "../Base/Empty";
export default {
  components: { Empty, Style0 },
  props: {
    module: { type: Object },
  },

  mounted: function () {
    this.loadData();
    this.loadCatData();
  },

  watch: {
    "module.items": function (ids) {
      if (!ids || ids.length == 0) {
        this.loading = false;
        this.items = [];
        // return;
      }
      this.loadData();
    },
    "module.data.pageSize": function (perPage) {
      this.loadData();
    },
    "module.data.dataFrom": function (dataFrom) {
      this.loadData();
    },
  },

  computed: {
    primaryColor: function () {
      return this.$store.state.myconfig.color.primary || "#1989fa";
    },
    perPage: function () {
      return this.module.data.pageSize || 10;
    },
  },
  data() {
    return {
      items: [],
      loading: false,
      catItems: [],
    };
  },

  methods: {
    loadData: function () {
      // if (!this.module.ids || this.module.ids.length == 0) {
      //     return;
      // }
      this.loading = true;
      var query = { per_page: this.perPage  };
      if (this.module.data.dataFrom === "ids") {
        query.ids = this.module.items.join(",");
      }
      getNewsList(query).then((resp) => {
        this.loading = false;
        if (resp.status == 0) {
          this.items = resp.data;
        }
      });
    },
    loadCatData: function () {
      this.loading = true;
      getNewsCatList().then((resp) => {
        this.loading = false;
        if (resp.status == 0) {
          var newcat = {
            id: 0,
            name: "全部",
          };
          var cats = resp.data;
          cats.unshift(newcat);
          this.catItems = cats;
        }
      });
    },
  },
};
</script>

<style scoped>
.outer {
  width: 100%;
  padding: 0 30px;
}
.new-cats {
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* margin: 0 20px; */
  margin-bottom: 30px;
  max-height: 100px;
  overflow-y: hidden; /* 禁止垂直滚动 */

  /* height: auto; */
}
.new-cats::-webkit-scrollbar {
  display: none;
}
.new-cats .new-cat {
  height: 60px;
  line-height: 60px;
  font-size: 28px;
  color: #333;
  background-color: #f5f5f5;
  padding: 0 20px;
  border-radius: 4px;
  margin-right: 20px;
}
.new-cats .new-cat:last-child {
  margin-right: 0px;
}
</style>